<!--  -->
<template>
  <div class="evaluate-main">
    <div class="evaluate-box">
      <div class="main-title"></div>
      <div class="main-box">
        <div class="box-left">
          <el-tree
            class="filter-tree"
            :data="categoryTreeData"
            accordion
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="selectCategory"
            ref="tree"
          >
          </el-tree>
        </div>
        <div class="jiange"></div>
        <div class="box-right">
          <div class="table-box">
            <el-table :data="evaluateList" border style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="{row}">
                  <evaluate-item :evaluate="row"/>
                </template>
              </el-table-column>
              <el-table-column prop="serialNo" label="评价id"></el-table-column>
              <el-table-column
                prop="skuName"
                label="商品名称"
              ></el-table-column>
              <el-table-column
                prop="stringEvaluation"
                label="评价信息"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column prop="score" label="评分">
                <template slot-scope="{row}">
                  <el-rate v-model="row.score" disabled></el-rate>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="queryParams.curPage"
            :page-sizes="[5, 10, 20, 100]"
            :page-size="queryParams.pagesSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import EvaluateItem from './evaluate-item'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    EvaluateItem,
  },
  data() {
    // 这里存放数据
    return {
      activeNames: '1',
      filterText: '',
      categoryTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      queryParams: {
        page: 1,
        limit: 5,
        categoryNo: null,
        replyFlag: null,
        min: null,
        max: null
      },
      total: 0,
      evaluateList: [
        {
          serialNo: '20220430000001',
          objectNo: 'Order2021212',
          evaluation:
            '物品已经收到了，快递配送的也很快。外包装也很好，打开包装按照说明书，把配件整理一下，用螺丝将支架组装了起来，最后把桌板也固定上了，装完放到地板上，挺稳定的，可以调节平整的螺母很人性化，桌面光泽度很好，也很平整，原木色是我喜欢的类型，挺喜欢的，很实用！',
        },
      ],
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    queryParams: {
      handler() {
        this.queryEvaluationList()
      },
      deep: true
    }
  },
  // 方法集合
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    queryCategoryTree() {
      this.$http({
        url: this.$http.adornUrl('/mall/categoryinfo/tree'),
        method: 'get',
        params: this.$http.adornParams(),
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.categoryTreeData = [
            {
              name: '所有分类',
              children: data.page.list,
            },
          ]
        } else {
          this.categoryTreeData = [
            {
              name: '所有分类',
              children: [],
            },
          ]
        }
      })
    },
    queryEvaluationList() {
      this.$http({
        url: this.$http.adornUrl('/mall/evaluateinfo/list'),
        method: 'get',
        params: this.$http.adornParams(this.queryParams),
      }).then(({data}) => {
        console.log(data)
        if (data && data.code === 0) {
          this.evaluateList = data.page.list
          this.total = data.page.totalCount
        }
      })
    },
    selectCategory(data) {
      this.queryParams.categoryNo = data.serialNo
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryParams.pagesSize = val
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryParams.curPage = val
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.queryCategoryTree()
    this.queryEvaluationList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss'>
.evaluate-main {
  position: relative;

  .evaluate-box {
    display: flex;
    flex-direction: column;

    .main-box {
      display: flex;

      .box-left {
        width: 400px;
        min-height: 700px;
        flex-direction: column;
        display: flex;

        .el-input {
          width: 200px;
          margin: 20px 0;
        }
      }

      .box-right {
        flex: 1;
        border-left: 1px solid #dcdfe6;
        padding: 20px;
      }
    }
  }
}
</style>
